<template>
  <div class="flex">
    <div class="sort-container">
      <el-dropdown class="toggle-container" trigger="click" @command="selectSortType">
        <el-button class="sort-toggle-btn">
          排序方式<i class="el-icon-arrow-down el-icon--right"/>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            v-for="item in listType" :key="item.value"
            :command="item.value">{{ item.cn }}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-button class="order-toggle-btn" icon="el-icon-share"></el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Sort-v2', // 分开操作 排序方式 和 顺序倒序 的排序组件
  props: {
    listType: { // 是对什么排序，在 constants/sort.js 中定义了有哪些
      type: Array,
      required: true,
    },
  },
  computed: {},
  methods: {
    // 选择排序方式
    selectSortType(val) { this.$root.$emit('addQuery', { sort: val }); },
  },
};
</script>

<style lang="scss">
.sort-container {
  display: flex;
  position: relative;

  .toggle-container:not(:last-child) {
    margin-right: -1px;

    .sort-toggle-btn {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  .order-toggle-btn{
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .sort-toggle-btn:hover,
  .order-toggle-btn:hover { z-index: 1; } ;
}
</style>
